<template>
  <div class="show">
   
      <h2 class="show-h2">热门演出</h2> 
      <div class="show-mian" @click='goPre' v-for='(item,index) in showList' :key='index'>
         <img :src="item.pic" alt="">
          <!-- <div>{{item.url}}</div> -->
          <div class="show-text">
          <p>{{item.start_show_time}}
          </p>
          <p>{{item.name}}</p>
          <p><span>{{item.city_name}} </span>|<span>{{item.venue_name}}</span></p>
          <p>{{item.support_desc}}</p>
          <p>￥{{item.max_price}} <span>起</span></p>
          </div>
          </div>
          <p class="show-ft">没有更多了</p>
  </div>
</template>

<script>
// import 
import {mapState,mapGetters} from 'vuex'
export default {
 data () {
        return {
        }
    },
    computed:{
      ...mapState('show',['showList']) 
  },
  methods:{
    goPre(){
      this.$router.push({path:'/pre'})
    }
    
  }
   
}
</script>

<style  lang='scss' scoped>
.show{margin-bottom: 1.5rem;}


 .show-h2{   
   height:1.2rem;
  margin-bottom: 0.05rem;
  line-height: 1.2rem;
  font-size: 0.35rem;
  margin-left: 0.3rem;
  color: #232323;
  

}
.show-mian{ height:2.8rem;display: flex;margin-bottom: 0.4rem;}
.show-text{
margin-right: 0.4rem;
}
.show-mian p:nth-of-type(1){
  font-size: 0.33rem;
  line-height: 0.5rem;
   color: #232323;
   }
   .show-mian p:nth-of-type(2){
     overflow: hidden;
     height:0.9rem;
      font-size: 0.32rem;
      line-height: 0.45rem;
      color: #232323;
  
   }
    .show-mian p:nth-of-type(3){
      line-height: 0.4rem;
      color: #666666;
    }
     .show-mian p:nth-of-type(4){
      line-height: 0.65rem;
      color: #ff6743;
      span{display:inline-block;background:#fff1ef;height:0.24rem;width:0.6rem}
    }
    .show-mian p:nth-of-type(5){
      color:#ff6743;
      font-size:0.32rem;
      span{color: #666666;font-size: 0.16rem;}
    }
  .show-mian img{ height:100%;margin-left: 0.3rem;margin-right: 0.22rem;border-radius: 0.1rem}
 .show-ft{text-align: center; color: #666666;}
</style>